<template>
    <div id="app">
        <Login v-if="!isLoggedIn" @login-success="handleLoginSuccess" />
        <Chat v-else :username="username" />
        <!-- 新增错误提示区域 -->
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    </div>
</template>

<script>
import { ref } from 'vue';
import Login from './components/Login.vue';
import Chat from './components/Chat.vue';

export default {
    name: 'App',
    components: {
        Login,
        Chat
    },
    setup() {
        const username = ref('');
        const isLoggedIn = ref(false);
        const errorMessage = ref(''); // 定义错误信息状态
        // console.log("开始")

        console.log("调用登录"); // 调试用，实际使用时可以删除这一行

        // 处理登录成功事件
        const handleLoginSuccess = (result) => {
            if (!result || !result.fromName) {
                errorMessage.value = '登录信息获取失败，请重试';
                console.error('登录结果中缺少必要的 name 字段，result:', result);
                return;
            }
            username.value = result.fromName; // 假设返回结果中有 name 字段
            isLoggedIn.value = true;

        };

        return {
            username,
            isLoggedIn,
            handleLoginSuccess,
            errorMessage // 返回错误信息状态
        };
    }
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
